<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="height: 598px;">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">
            <!-- 文章分类 -->
            <el-menu-item index="1">
              <el-icon><icon-menu /></el-icon>
              <RouterLink :to="{ path: '/index/fl' }"><span style="color: black;">文章分类</span></RouterLink>
            </el-menu-item>
            <!-- 文章管理 -->
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <RouterLink :to="{ path: '/index/gl' }"> <span style="color: black;">文章管理</span></RouterLink>
            </el-menu-item>
            <!-- 个人中心 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <setting />
                </el-icon>个人中心
              </template>
              <el-menu-item-group>
                <RouterLink :to="{ path: '/index/zl' }"> <el-menu-item index="3-1">基本资料</el-menu-item></RouterLink>
                <RouterLink :to="{ path: '/index/tx' }"> <el-menu-item index="3-2">更换头像</el-menu-item></RouterLink>
                <RouterLink :to="{ path: '/index/pass' }"> <el-menu-item index="3-3">重置密码</el-menu-item></RouterLink>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header>
          <div style="float: left;">
            <span>你好：</span>
            <span v-if="user.name" style="font-weight: 900;" class="name">{{ user.name }}</span>
            <span v-if="!user.name" style="font-weight: 900; color: rgb(0,0,0,0.3);" class="name">未设置</span>
          </div>
          <!-- 头像 -->
          <el-dropdown style="float: right;">
            <el-avatar :src="user.imgurl"> 未设置</el-avatar>

            <template #dropdown>
              <el-dropdown-menu>          
                <RouterLink :to="{ path: '/index/zl' }"><el-dropdown-item command="a">基本资料</el-dropdown-item></RouterLink>
                <RouterLink :to="{ path: '/index/pass' }"><el-dropdown-item command="b">重置密码</el-dropdown-item></RouterLink>
                <RouterLink :to="{ path: '/index/tx' }"><el-dropdown-item command="c">更换头像</el-dropdown-item></RouterLink>
               <el-dropdown-item command="c" @click = "outlogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>

        <el-main>
          <RouterView></RouterView>
        </el-main>
        <el-footer>
          <div style="text-align: center;">®yuanqi32134 专注于老年房</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import {instance} from '@/utils/MyRequeest'
import {Usertoken} from '@/stores/token'
import router from '@/router';
const outlogin =() =>{
  Usertoken().token = ''
  router.push('/login')
}


let user = ref ({
name:'',
imgurl:''
})
instance({
  method:'get',
  url:'user/getuser'
}).
then((res)=>{
  user.value = res.data.data
})

</script>
<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>